<template>
  <div class="user-edit">
    <div style="padding:20px 20px 20px 20px;">
      <vxe-toolbar size="mini">
        <template #buttons>
          <vxe-button type="text" icon="vxe-icon--plus" status="success" @click="handleAdd">新增</vxe-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="xTable"
        :align="'center'"
        :data="securityUserList"
        :edit-config="{trigger: 'click', mode: 'cell'}"
        highlight-current-row
        highlight-hover-row
        border
        round
        resizable
        show-overflow
        size="mini"
        :height="height"
      >
        <vxe-table-column field="securityUserCode" title="用户编码" width="300" />
        <vxe-table-column field="securityUserName" title="用户名" width="320" />
        <vxe-table-column title="操作">
          <template #default="{ row }">
            <vxe-button icon="vxe-icon--edit-outline" status="primary" @click="handleModify(row)">修改</vxe-button>
            <vxe-button icon="vxe-icon--close" status="danger" @click="handleDeleteRow(row)">删除</vxe-button>
            <vxe-button icon="vxe-icon--refresh" status="info" @click="handleResetPassword(row)">重置密码</vxe-button>
            <vxe-button icon="vxe-icon--edit-outline" status="success" @click="handleModifyPassword(row)">修改密码</vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false" width="30%">
        <el-form ref="form" size="mini" :model="form" label-width="80px">
          <el-form-item label="用户编码">
            <el-input v-model="form.securityUserCode" :disabled="enabled" />
          </el-form-item>
          <el-form-item v-if="title === '新增'" label="密码">
            <el-input v-model="form.securityUserPasswodTemp" show-password />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="form.securityUserName" />
          </el-form-item>
        </el-form>
        <el-row style="height:32px">
          <el-row style="float:right;margin-top:4px;">
            <el-button size="mini" type="success" icon="el-icon-check" circle @click="handleSure" />
            <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleClose" />
          </el-row>
        </el-row>
      </el-dialog>
    </div>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog title="修改密码" :visible.sync="dialogModifyPwdVisible" :close-on-click-modal="false" :show-close="false" width="30%">
        <el-form size="mini" label-width="80px">
          <el-form-item label="原密码">
            <el-input v-model="sourcePassword" show-password />
          </el-form-item>
          <el-form-item label="修改密码">
            <el-input v-model="targerPassword" show-password />
          </el-form-item>
          <el-form-item label="修改密码">
            <el-input v-model="againPassword" show-password />
          </el-form-item>
        </el-form>
        <el-row style="height:32px">
          <el-row style="float:right;margin-top:4px;">
            <el-button size="mini" type="success" icon="el-icon-check" circle @click="handleModifyPwdSure" />
            <el-button size="mini" type="danger" icon="el-icon-close" circle @click="handleModifyPwdClose" />
          </el-row>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getSecurityUserList, deleteSecurityUser, updateSecurityUser, saveSecurityUser, updateSecurityUserPassword } from '@/api/user'
import md5 from 'js-md5'
export default {
  data() {
    return {
      securityUserList: [],
      height: (window.innerHeight - 130) + 'px',
      title: '新增',
      dialogVisible: false,
      form: {},
      enabled: false,
      curRow: {},
      dialogModifyPwdVisible: false,
      sourcePassword: '',
      targerPassword: '',
      againPassword: '',
      modifyPwdRow: {}
    }
  },
  mounted() {
    const that = this
    getSecurityUserList().then(res => {
      if (res.data) {
        that.securityUserList = res.data
      }
    })
  },
  methods: {
    handleAdd() {
      this.enabled = false
      this.dialogVisible = true
      this.title = '新增'
      this.form = {}
    },
    handleModify(row) {
      this.enabled = true
      this.dialogVisible = true
      this.title = '修改'
      this.form = JSON.parse(JSON.stringify(row))
      this.curRow = row
    },
    handleDeleteRow(row) {
      const that = this
      row.securityUserUseflag = '0'
      deleteSecurityUser(row).then(res => {
        if (res.data) {
          const $table = that.$refs.xTable
          $table.remove(row)
          that.$message.success('删除成功！')
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleSure() {
      if (this.handleCheck()) {
        const that = this
        if (this.title === '修改') {
          updateSecurityUser(this.form).then(res => {
            if (res.data) {
              that.curRow.securityUserName = that.form.securityUserName
              that.$message.success('更新成功！')
              that.dialogVisible = false
            }
          })
        } else {
          this.form.securityUserPasswod = md5(this.form.securityUserPasswodTemp)
          console.log(this.form)
          saveSecurityUser(this.form).then(res => {
            if (res.data) {
              that.$message.success('新增成功！')
              that.dialogVisible = false
              that.securityUserList.push(that.form)
            }
          })
        }
      }
    },
    handleCheck() {
      if (this.form.securityUserName === undefined || this.form.securityUserName === null || this.form.securityUserName === '') {
        this.$message.error('用户名不能为空!')
        return false
      }
      if (this.title === '新增') {
        if (this.form.securityUserPasswodTemp === undefined || this.form.securityUserPasswodTemp === null || this.form.securityUserPasswodTemp === '') {
          this.$message.error('密码不能为空!')
          return false
        }
      }
      if (this.form.securityUserCode === undefined || this.form.securityUserCode === null || this.form.securityUserCode === '') {
        this.$message.error('用户编码不能为空!')
        return false
      }
      return true
    },
    // 重置密码
    handleResetPassword(row) {
      this.$confirm('确定要重置用户【' + row.securityUserName + '】的密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.securityUserPasswod = md5('111111')
        updateSecurityUserPassword(row).then(res => {
          if (res.data) {
            this.$message.success('重置成功!')
          }
        })
      })
    },
    // 修改密码
    handleModifyPassword(row) {
      this.sourcePassword = ''
      this.targerPassword = ''
      this.againPassword = ''
      this.dialogModifyPwdVisible = true
      this.modifyPwdRow = row
    },
    handleModifyPwdSure() {
      if (this.modifyPwdRow.securityUserPasswod === md5(this.sourcePassword)) {
        if (this.targerPassword === this.againPassword) {
          this.modifyPwdRow.securityUserPasswod = md5(this.againPassword)
          const that = this
          updateSecurityUserPassword(this.modifyPwdRow).then(res => {
            if (res.data) {
              this.$message.success('修改成功!')
              that.dialogModifyPwdVisible = false
            }
          })
        }
      }
    },
    handleModifyPwdClose() {
      this.dialogModifyPwdVisible = false
    }
  }
}
</script>
